<template>
<div>

  <el-row class="bread-nav">
    <ul class="bread-nav-title">
      <span>限额</span>
    </ul>
    <ul class="bread-nav-title-right">
      <button @click="getLimits">
        刷新
      </button>
    </ul>
  </el-row>

  <div class="content">
    <div>
      <el-row class="content-info-nav">
        <button v-for="(item, index) in lotteryType" :key="index" class="content-info-nav-button" :class="currtType === item?'':'lotteryTypeSelected'">
          {{item}}
        </button>
      </el-row>

      <table class="myTable">
        <thead>
        <tr>
          <th>
            种类
          </th>
          <th>
            A盘（%）
          </th>
          <th>
            B盘（%）
          </th>
          <th>
            C盘（%）
          </th>
          <th>
            D盘（%）
          </th>
          <th>
            单注限额
          </th>
          <th>
            单场限额
          </th>
          <th>
            操作
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,key,index1) in userMap.gameCatalogCode[currtType]" :key="index1">
          <td class="specificTableTd">{{item.name}}<span :class="'color'+key"></span></td>
          <td><input type="text" v-model="quickSetup[key].a_commission"/></td>
          <td><input type="text" v-model="quickSetup[key].b_commission"/></td>
          <td><input type="text" v-model="quickSetup[key].c_commission"/></td>
          <td><input type="text" v-model="quickSetup[key].d_commission"/></td>
          <td><input type="text" v-model="quickSetup[key].order_max_amount"/></td>
          <td><input type="text" v-model="quickSetup[key].period_max_amount"/></td>
          <td>
            <button @click="changeLimitsList(key,currtType)">修改</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div v-for="(list,index) in KKlimitsInfoList" :key="index" class="content-info" v-if="currtType === '快开彩'">
      <el-row class="content-info-nav">
        <button class="content-info-nav-button">
            {{KKlotteryTypeInfo[index]}}
        </button>
      </el-row>
      <table class="upTable">
        <tr>
          <td v-for="(subList,subIndex) in list" :key="subIndex">
            <table class="myTable">
              <thead>
              <tr>
                <th>
                  种类
                </th>
                <th>
                  A盘（%）
                </th>
                <th>
                  B盘（%）
                </th>
                <th>
                  C盘（%）
                </th>
                <th>
                  D盘（%）
                </th>
                <th>
                  单注限额
                </th>
                <th>
                  单场限额
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,subIndex1) in subList" :key="subIndex1">
                <td class="specificTableTd">{{item.name}}<span :class="'color'+item.category_code"></span></td>
                <td><input type="text"
                           v-model="item.a_commission" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].a_commission != item.a_commission}"/></td>
                <td><input type="text"
                           v-model="item.b_commission" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].b_commission != item.b_commission}"/></td>
                <td><input type="text"
                           v-model="item.c_commission" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].c_commission != item.c_commission}"/></td>
                <td><input type="text"
                           v-model="item.d_commission" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].d_commission != item.d_commission}"/></td>
                <td><input type="text"
                           v-model="item.order_max_amount" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].order_max_amount != item.order_max_amount}"/></td>
                <td><input type="text"
                           v-model="item.period_max_amount" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].period_max_amount != item.period_max_amount}"/></td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
    </div>

  <div v-for="(list,index) in HKlimitsInfoList" :key="index" class="content-info" v-if="currtType === '香港彩'">
    <el-row class="content-info-nav">
      <button class="content-info-nav-button">
        {{KKlotteryTypeInfo[index]}}
      </button>
    </el-row>
    <table class="upTable">
      <tr>
        <td v-for="(subList,subIndex) in list" :key="subIndex">
          <table class="myTable">
            <thead>
            <tr>
              <th>
                种类
              </th>
              <th>
                A盘（%）
              </th>
              <th>
                B盘（%）
              </th>
              <th>
                C盘（%）
              </th>
              <th>
                D盘（%）
              </th>
              <th>
                单注限额
              </th>
              <th>
                单场限额
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,subIndex1) in subList" :key="subIndex1">
              <td class="specificTableTd">{{item.name}}<span :class="'color'+item.category_code"></span></td>
              <td><input type="text" v-model="item.a_commission"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].a_commission != item.a_commission}"/></td>
              <td><input type="text" v-model="item.b_commission"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].b_commission != item.period_max_amount}"/></td>
              <td><input type="text" v-model="item.c_commission"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].c_commission != item.c_commission}"/></td>
              <td><input type="text" v-model="item.d_commission"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].d_commission != item.d_commission}"/></td>
              <td><input type="text" v-model="item.order_max_amount"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].order_max_amount != item.order_max_amount}"/></td>
              <td><input type="text" v-model="item.period_max_amount"
                         :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].period_max_amount != item.period_max_amount}"/></td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>

  <el-row class="baseOdd-bottom">
    <button @click="subBtn">确认</button>
    <button @click="cancelBtn">取消</button>
  </el-row>

</div>
</template>

<script>
  import { user as userMap } from '@/utils/map' // 参数映射
  import { Message } from 'element-ui'
  export default {
    name: 'limits',
    methods: {
      // 上方修改按钮事件
      changeLimitsList(lotteryType, lotteryBigType) {
        if (lotteryBigType === '快开彩') {
          for (const key in this.KKlimitsInfoList) {
            for (const index in this.KKlimitsInfoList[key]) {
              for (const subIndex in this.KKlimitsInfoList[key][index]) {
                if (this.KKlimitsInfoList[key][index][subIndex].category_code === lotteryType) {
                  this.KKlimitsInfoList[key][index][subIndex].a_commission = this.quickSetup[lotteryType].a_commission
                  this.KKlimitsInfoList[key][index][subIndex].b_commission = this.quickSetup[lotteryType].b_commission
                  this.KKlimitsInfoList[key][index][subIndex].c_commission = this.quickSetup[lotteryType].c_commission
                  this.KKlimitsInfoList[key][index][subIndex].d_commission = this.quickSetup[lotteryType].d_commission
                  this.KKlimitsInfoList[key][index][subIndex].order_max_amount = this.quickSetup[lotteryType].order_max_amount
                  this.KKlimitsInfoList[key][index][subIndex].period_max_amount = this.quickSetup[lotteryType].period_max_amount
                }
              }
            }
          }
        }
      },
      // 取消 还原数值
      cancelBtn() {
        this.KKlimitsInfoList = JSON.parse(JSON.stringify(this.beforeKKlimitsInfoList))
        this.HKlimitsInfoList = JSON.parse(JSON.stringify(this.beforeHKlimitsInfoList))
      },
      // 确认事件
      subBtn() {
        for (const key in this.KKlimitsInfoList) {
          for (const index in this.KKlimitsInfoList[key]) {
            for (const subIndex in this.KKlimitsInfoList[key][index]) {
              const tempForm = []
              const temp = this.KKlimitsInfoList[key][index][subIndex]
              if (this.KKlimitsInfoList[key][index][subIndex].a_commission !== this.beforeKKlimitsInfoList[key][index][subIndex].a_commission) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '1', v: temp.a_commission })
              }
              if (this.KKlimitsInfoList[key][index][subIndex].b_commission !== this.beforeKKlimitsInfoList[key][index][subIndex].b_commission) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '2', v: temp.b_commission })
              }
              if (this.KKlimitsInfoList[key][index][subIndex].c_commission !== this.beforeKKlimitsInfoList[key][index][subIndex].c_commission) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '3', v: temp.c_commission })
              }
              if (this.KKlimitsInfoList[key][index][subIndex].d_commission !== this.beforeKKlimitsInfoList[key][index][subIndex].d_commission) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '4', v: temp.d_commission })
              }
              if (this.KKlimitsInfoList[key][index][subIndex].order_max_amount !== this.beforeKKlimitsInfoList[key][index][subIndex].order_max_amount) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '5', v: temp.order_max_amount })
              }
              if (this.KKlimitsInfoList[key][index][subIndex].period_max_amount !== this.beforeKKlimitsInfoList[key][index][subIndex].period_max_amount) {
                tempForm.push({ k: temp.game + '_' + temp.item_id + '_' + '5', v: temp.period_max_amount })
              }
              for (const formTempIndex in tempForm) {
                this.formlist.params.push(tempForm[formTempIndex])
              }
            }
          }
        }
        console.log('123456798', this.formlist)
        if (this.formlist.params.length !== 0) {
          if (window.confirm('你确定要提交修改吗？')) {
            console.log(this.formlist.params.length === 0)
            console.log(this.formlist)
            this.$store.dispatch('SaveLimits', this.formlist)
              .then(response => {
                Message.success(response.message)
              })
            return true
          } else {
            return false
          }
        } else {
          Message.success('请先修改数据')
        }
      },
      // 获取限额
      getLimits() {
        this.lotteryType = []
        this.KKlimitsInfoList = []
        this.KKlotteryTypeInfo = []

        this.HKlimitsInfoList = []
        this.HKlotteryTypeList = []

        this.beforeHKlimitsInfoList = []
        this.beforeKKlimitsInfoList = []

        this.$store.dispatch('GetLimits')
          .then(response => {
            this.limitsInfo = response
            for (const key in response) {
              if (key !== 'message') {
                this.lotteryType.push(key)
                if (key === '快开彩') {
                  this.currtType = key
                }
              }
              if (key === '快开彩') {
                for (const upIndex in response[key]) {
                  this.KKlotteryTypeInfo.push(upIndex)
                  let listI = 0
                  const halfA = []
                  const halfB = []
                  const halfAll = []
                  const listHalfLength = parseInt(Object.keys(response[key][upIndex]).length / 2)
                  for (const index in response[key][upIndex]) {
                    if (listI < listHalfLength) {
                      halfA.push(response[key][upIndex][index])
                    } else {
                      halfB.push(response[key][upIndex][index])
                    }
                    listI++
                  }
                  halfAll.push(halfA)
                  halfAll.push(halfB)
                  this.KKlimitsInfoList.push(halfAll)
                }
                this.beforeKKlimitsInfoList = JSON.parse(JSON.stringify(this.KKlimitsInfoList))
              } else {
                for (const upIndex in response[key]) {
                  this.HKlotteryTypeList.push(upIndex)
                  let listI = 0
                  const halfA = []
                  const halfB = []
                  const halfAll = []
                  const listHalfLength = parseInt(Object.keys(response[key][upIndex]).length / 2)
                  for (const index in response[key][upIndex]) {
                    if (listI < listHalfLength) {
                      halfA.push(response[key][upIndex][index])
                    } else {
                      halfB.push(response[key][upIndex][index])
                    }
                    listI++
                  }
                  halfAll.push(halfA)
                  halfAll.push(halfB)
                  this.HKlimitsInfoList.push(halfAll)
                }
              }
            }
            this.beforeHKlimitsInfoList = JSON.parse(JSON.stringify(this.HKlimitsInfoList))
            console.log('00000000000', this.KKlimitsInfoList, this.KKlotteryTypeInfo)
          })
      },
    },
    created() {
      this.getLimits()
      for (const key in this.quickSetup) {
        for (const index in this.userMap.commissionType) {
          this.quickSetup[key][this.userMap.commissionType[index].field] = this.userMap.commissionType[index].max
        }
      }
      console.log('0000000000000000', this.quickSetup)
    },
    data() {
      return {
        userMap: userMap, // 用户参数映射
        limitsInfo: '', // 限额数据
        lotteryType: [], // 彩票类别
        currtType: '', // 当前选中的类别
        HKlimitsInfoList: [], // 限额数据处理后,香港彩
        HKlotteryTypeList: [], // 处理后的彩票种类，小类别，香港彩
        KKlimitsInfoList: [], // 限额数据处理后，小类别，快开彩
        KKlotteryTypeInfo: [], // 处理后的彩票种类，小类别，快开彩
        beforeHKlimitsInfoList: [],
        beforeKKlimitsInfoList: [],
        formlist: {
          'params': [],
        },
        quickSetup: {
          '11': [], // 游戏大类分类/号码类
          '12': [], // 游戏大类分类/两面类
          '13': [], // 游戏大类分类/多项类
          '14': [], // 游戏大类分类/连码类
          '15': [], // 游戏大类分类/其它
        },
      }
    },
  }
</script>

<style scoped>
  .bread-nav {
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }

  .bread-nav-title {
    color: #386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .bread-nav-title-right{
    float:right;
  }
  .bread-nav-title-right button{
    border: 0;
    background-color: rgba(0,0,0,0);
    height:30px;
    line-height: 30px;
    color:red;
    font-weight: bold;
  }
  .content{
    padding: 10px;
  }
  .content-info{
    width: 100%;
    padding-top: 5px;
  }
  .content-info-nav{

  }
  .content-info-nav-button{
    color:#ff8c3f;
    border:0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #386bad;
    height:30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
  }
  .content-info-nav-button:hover{
    text-decoration: underline;
  }
  .upTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .upTable td{
    vertical-align: top;
    width: 50%;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .myTable th {
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }

  .myTable td {
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #B9C2CB;
  }
  .specificTableTd{
    padding-left: 10px !important;
    padding-right: 0 !important;
    background-color: #f2f2f2 !important;
  }
  .myTable tr:hover {
    background-color: #CAE8F6;
  }
  .myTable td input[type='text']{
    width:60px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
    margin: 0 10px;
  }

  .baseOdd-bottom{
    text-align: center;
    margin-top: 20px;
  }
  .baseOdd-bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .baseOdd-bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .lotteryTypeSelected{
    background-color: #dcdcdc;
    color:#535353;
  }

  .color11{
    display: inline-block;
    height:26px;
    width:5px;
    background-color: #7f96fe;
    float:right
  }
  .color12{
    display: inline-block;
    height:26px;
    width:5px;
    background-color: #c67fff;
    float:right
  }
  .color13{
    display: inline-block;
    height:26px;
    width:5px;
    background-color: #44ffff;
    float:right
  }
  .color14{
    display: inline-block;
    height:26px;
    width:5px;
    background-color: #fe877f;
    float:right
  }
  .color15{
    display: inline-block;
    height:26px;
    width:5px;
    background-color: #7ae774;
    float:right
  }

  .change{
    background-color: #8eff7a;
  }
</style>
